<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色维护</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<body>
		<div id="app">
			<el-button @click="showDialog('add')" type="primary" style="margin-bottom: 20px;">新增菜单</el-button>
			<el-table :data="roleList" style="width: 100%">
				<el-table-column prop="rolenane" label="角色名字">
				</el-table-column>
				<el-table-column prop="description" label="部门">
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="small">删除</el-button>
						<el-button type="primary" size="small">编辑</el-button>
						<el-button @click="updrawer(scope.row)" type="primary" size="small">角色菜单</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-drawer title="菜单维护" :visible.sync="drawer" :with-header="false">
				<el-button @click="" type="primary" size="small">确定修改角色菜单</el-button>
				<el-tree :data="treeData" ref="tree" :show-checkbox="true" default-expand-all="true" :default-expanded-keys="tree"
					:default-checked-keys="tree">
				</el-tree>
			</el-drawer>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				roleList: [],
				drawer: false, //控制角色菜单维护抽递
				treeData:[],
				tree:[],
			},
			methods: {
				init() {
					var that = this;
					axios.get(API + "selectAllRole")
						.then(function(response) {
							console.log(response)
							that.roleList = response.data.data.list;
						})
				},
				updrawer(row) {
					var that = this;
					this.inittreeData();
					//根据角色id获取菜单集合
					axios.get(API+"selectRoleMenuById/"+row.id)
					.then(function(res){
						let slist=res.data.data.rolemenuList
						let arr =slist.map((obj) => obj.menuid)
						console.log(arr);
						that.$refs.tree.setCeckedkeys(arr);
					})
					this.drawer = !this.drawer;
				},
				inittreeData() {
					let that = this;
					axios.get(API + "menuList")
						.then(function(response) {
							console.log(response)
							var s = arrayToTree(response.data.data.list);
							that.treeData = s;
						})
				},
			},
			mounted() {
				//生命周期函数 挂载后执行
				this.init(); //初始化获取树的数据
			}
		})
	</script>
</html>